<template>
	<div>
		<div class="w3-card-4" style="width:94%">

			<div class="w3-container">
				<p>名片</p>
				<button @click="after" class="upbut">上传</button>
			</div>
			<div class="cardimg">
				<button id="upload-button" >
					<van-icon name="photo-o" color="#1989fa" size="130"  />
					<input type="file" name="productImg" :onchange="getimgsrc" class="upinput" id="upload-input" />
				</button>
				<img :src="imgsrc" class="onimg" @click="uploadbutton">

				<div v-for="i in tu" :key="i"  class="AfterAcquisition">
  <img :src="i.cardId1" alt="名片"  @click="uploadbutton">
  </div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { GoToCardPositive, GetUserslice } from '@/api/my'
const fileList = ref([])
const imageData = ref()
const isShow = ref(false)
const showList = ref(false)
const imgsrc = ref('')
const tu = ref([])


//点击选择图片
const uploadbutton = () => {
	let uploadInput = document.getElementById("upload-input");
	uploadInput.click();
}

//获取名片
const userslice = async () => {
	let _id = JSON.parse(localStorage.getItem("user"))._id
	let data = await GetUserslice(_id)
	let { resultCode, resultInfo } = data
	if (resultCode == 1) {
		tu.value = resultInfo
		console.log('拿到了', 'tutu', tu.value);
	} else {
		console.log('没有');
	}
}


//预览
const getimgsrc = () => {
	const imgg = document.querySelector("input[name='productImg']")
	let windowURL = window.URL || window.webkitURL;
	let imggg = imgg.files[0]
	imgsrc.value = windowURL.createObjectURL(imggg)
}
//正面
const after = async () => {
	const imgg = document.querySelector("input[name='productImg']")
	let imggg = imgg.files[0]
	let _id = JSON.parse(localStorage.getItem("user"))._id
	console.log('正面', _id);
	//异步上传二进制文件，需要把图片转为二进制要用到formdata
	const forms = new FormData();
	forms.append("_id", _id)
	forms.append("cardId1", imggg)
	console.log(_id);
	let data = await GoToCardPositive(forms)
	console.log(forms);
	let { resultCode, resultInfo } = data
	if (resultCode == 1) {
		alert(resultInfo)
	} else {
		alert(resultInfo)
	}
}
onMounted(() => {
	userslice()
})
</script>
<style scoped lang="scss">
.w3-card-4 {
	width: 100%;
	height: 100%;
	margin: 0 auto;
		background-color: rgb(255, 255, 255);
text-align: center;
	.w3-container {
		border-bottom: 1px solid #fcf9f9;
		margin-top: 3vh;
		padding-left: 4vw;
		padding-right: 4vw;
		width: 86vw;
		height: 5vh;
		padding-top: 3vh;
		background-color: rgb(255, 255, 255);
		display: flex;
		justify-content: space-between;
		line-height: 1vh;
		border-radius: 15px 15px 0 0;
		.upbut{
			height: 4vh;
			box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	background-color:#ededed;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	:hover{
		background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	background-color:#dfdfdf;
	}
	:active{
		position:relative;
	top:1px;
	}
		}
	}

	.cardimg {
		width: 100%;
		height: 28vh;
		position: relative;
		.onimg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 28vh;
		}
		.AfterAcquisition{
			img{
				position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 28vh;
			}
		}
	}
#upload-button{
background-color: transparent;
	border: 0;
margin-top: 5vh;
	:hover{
		background-color: rgb(202, 203, 204);
	}
}
	.upinput {
		display: none;
	}

}
</style>
  